<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>借阅渔网(购物车)</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/base.css">

  <link rel="stylesheet" href="css/dropload.css">
<link rel="stylesheet" href="css/richScan.css">
<style type="text/css">
a{
    text-decoration: none;
    color: blue;
    outline: 0 none;
}
.Spinner{display:block;overflow:hidden;width:100px;margin:0 auto 15px auto;}
.Spinner .Amount{width:26px;height:17px;padding:4px 5px;font-weight: bold;line-height:17px;border-width:1px 0;border-style:solid;border-color:#d9d9d9;float:left;text-align:center;font-size: 16px;color:#565656;outline:0;}
.Spinner a{display:inline-block;width:25px;height:25px;border:1px solid #d9d9d9;background-color:#f7f7f7;float:left;cursor:pointer;outline:0;}
.Spinner a i{font-style:normal;background:url(images/BuynBtn.png) no-repeat;display:block;width:9px;height:9px;margin:8px;text-indent:999999%;overflow:hidden;}
.Spinner .Decrease i{background-position:-9px -9px;}
.Spinner .Increase i{background-position:-9px -0px;}
.Spinner .DisDe i{background-position:-0px -9px;}
.Spinner .DisIn i{background-position:-0px -0px;}
.borrow{width:100%;}
.borrow_top{width:7.5rem;margin:0 auto;/*margin-top:1.28rem;*/display:flex;justify-content:space-between;flex-wrap:wrap;box-sizing:border-box;padding-right:0.27rem;padding-bottom:0.32rem;}
.borrow_top>a{display:inline-block;width:2rem;height:0.6rem;border-radius:0.1rem;border:0.01rem solid #2BB2E0;color:#2BB2E0;font-size:0.28rem;text-align:center;line-height:0.66rem;margin-top:0.35rem;margin-left:0.27rem;}
.borrow_top>a.borr_active{background:#2BB2E0;color:#fff;}
</style>

</head>
<body>
<!-- 	<div class="header-box"> -->
<!-- 		<p id="titlename">扫描借阅</p> -->
<!-- 	</div> -->
	<div class="back_title">
		<div class="back_title_box">
			<span id="spanTip" style="float: left;">
			  <span class="borrow_top" id="borrow_top">
		    	<a href="javascript:;" class="borr_active" id="spanDel">删除</a>
		  	</span>
		  
		  
			<!-- <img src="img/scanRead/tishi@2x.png"> 每满1元减0.05元</span> -->
			<!-- <span id="spanDel" style="margin: 15px;float: right;">
 			<a href="javascript:;" class="back_select" >删除</a> -->
<!-- 			<a class="Decrease reduc" href="javascript:void(0)">删除</a> -->
			<!-- <button> &nbsp;删除&nbsp; </button> -->
			 </span> 
		</div>
	</div>
	<div class="back_list">
		<div class="back_list_box" >
			<ul id="back_list_box">
			</ul>
			<div id="divShowNo" class="dropload-refresh" style="text-align: center;">您的渔网空空如也，赶快去捞鱼吧！<br>好多经典绘本等着小朋友借回家看呢</div>
		</div>
	</div>
	<div class="footer_kb1"></div>
	<div class="chose_back" id="borrowDiv" >
		<div class="chose_back_box" id="chose_back_box">
			<a href="javascript:void(0);" id="rich_scan"> <img
				src="img/scanRead/saomiao(1)@2x.png"> 扫描
			</a> 
			<a href="javascript:void(0);" class="back_select" id="jieyue"> <img
				src="img/scanRead/fufei@2x.png"> 借阅
			</a>
		</div>
	</div>
	
	<div class="chose_back" id="renewDiv" style="display: none" >
		<div class="chose_back_box" id="chose_back_box">
			<a href="#" id="renewACancel"> 取消
			</a> 
			<a href="#" class="back_select" id="jieyue"> <img
				src="img/scanRead/fufei@2x.png"> 确认
			</a>
		</div>
	</div>
</body>
<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/base.js?v=base.js?v=20180102"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="js/jsrender.js"></script>

<script id="book_show_tmpl" type="text/x-jsrender">
{{if #data.book != null}}
<li id="{{:id}}">
<b class="back_active"></b>
<div class="box_con">
	<div class="divImg"><img src="{{:#data.book.bookImage1}}"></div>
	<div class="box_right" style="margin-left: 10px;">
		<p>{{:#data.book.bookName}}</p>
		<p>作者：{{:#data.book.author}}</p>
		<p>主题：<i>{{:#data.book.classificationName}}</i>
		</p>
		<p>适龄：{{:#data.book.readMinAge}} - {{:#data.book.readMaxAge}}岁</p>
		<p class="xingxing1">
			 {{if #data.book.evaluationStar<1}}
            <img src="img/index/xing6@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>0 && #data.book.evaluationStar<2}}
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=2 && #data.book.evaluationStar<3}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=3 && #data.book.evaluationStar<4}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=4 && #data.book.evaluationStar<5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}

            <!--<span>{{:#data.book.evaluationStar}}</span>-->
		</p>
	</div>
</div>
<div class="box_con_bott">
	<div class="bott_left" style="padding-top: 3px;">
		<span>费用：</span> <span>￥<i class="retailPrice">{{:#data.book.borrowPrice}}</i>元/周</span>
	</div>
	<div class="bott_right">
		<b style="display: none">{{:id}}</b>
		<span style="float: left;padding-top: 3px;">周数：</span>

		<span id="c" class="Spinner" style="float: left">
		<a class="Decrease reduc" href="javascript:void(0)"><i>-</i></a>
		<input class="Amount num" value="{{:borrowWeeks}}" autocomplete="off" readonly maxlength="3">
		<a class="Increase add" href="javascript:void(0)"><i>+</i></a>
		</span>

	</div>
</div></li>
{{/if}}
</script>
<!-- <i class="reduc">-</i>  -->
<!-- 		<b class="num">{{:borrowWeeks}}</b>  -->
<!-- 		<i class="add">+</i> -->
<!-- 		<span>天</span> -->


<script>
var type = getQueryString("type");	

if(type==null || type==''){
	type = "borrow";
}

	$(document).on("click",'#back_list_box li .box_con',function() {
		var bTemp = $(this).prev("b");
		if (!bTemp.hasClass("back_active")) {
			!bTemp.attr('class', 'back_active');
		} else {
			!bTemp.removeClass('back_active');
		}
	});
	$(document).on("click",'#back_list_box li b',function() {
		var bTemp = $(this);
		if (!bTemp.hasClass("back_active")) {
			!bTemp.attr('class', 'back_active');
		} else {
			!bTemp.removeClass('back_active');
		}
	});
	
	
	/**数量减**/
	$('#back_list_box').on('click', '.reduc', function() {
		var value = parseInt($(this).siblings('.num').val());
		if(type == "borrow"){
			if (value > 1) {
				value--;
				$(this).next('.num').val(value);
				updateCart(this,value);
			}else{
// 				alert("最少借阅7天！");
			}
		}else{
			if (value > 1) {
				value--;
				$(this).next('.num').val(value);
				updateCart(this,value);
			}
		}
		
	});
	/**数量加**/
	$('#back_list_box').on('click', '.add', function() {
		var value = parseInt($(this).siblings('.num').val());
		value++;
		$(this).prev('.num').val(value);
		updateCart(this,value);
	});
	
	// 借阅，传入购物车id集合
	$(document).on('click', '#jieyue', function() {
		var ids = [];
		var arr = $(".back_active").parents("li");
		arr.each(function(i,itme){
			ids.push($(this).attr("id"));
		});
		window.location.href = "pay.html?ids="+ids.join();
	});
	
	// 修改购物车
	function updateCart(t,value){
		var id = $(t).parents("li").attr("id");
		var retailPrice = $(t).parents(".box_con_bott").find(".retailPrice").text();
		// 算出总价
		var total =  parseFloat(retailPrice)*value;
		$.ajax({
			url : window.baseUrl + "/api/book/bookCart/update",
			type: "PUT",
			data : JSON.stringify({
				id : id,
				borrowWeeks : value
			}),
			contentType : "application/json",
			success : function(data) {
				
			}
		});
	}
	
	function deleteCart(){
		var ids = [];
		var arr = $(".back_active").parents("li");
		arr.each(function(i,itme){
			ids.push($(this).attr("id"));
		});
		if(ids.length > 0){
			$.ajax({
				url : window.baseUrl + "/api/book/bookCart/deleteList",
				type: "DELETE",
				data : JSON.stringify(
					ids
				),
				contentType : "application/json",
				success : function(data) {
					getCart();
	// 				alert("删除成功！");
				}
			}); 
		}
	}
	
	
	// 删除购物车
	$("#spanDel").click(function(){
		deleteCart();
	});
	// 续借取消
	$("#renewACancel").click(function(){
		history.go(-1);
	});
	
	//续借
	if(type=="renew"){
		$("#titlename").text("续借");
		$("#borrowDiv").hide();
		$("#renewDiv").show();
		// $("#spanTip").text("每次最多只能续借一次哦");
	}
	
	var pageNum = 1;
	var pageSize = 10;	
getCart();
function getCart(){
	var userId = getUserId();
	// 获取当前用户下面的购物车
	$.get({
		url : window.baseUrl + "/api/book/bookCart/findPage",
		data : {
			uid : userId,
			cartType : type, //'borrow',renew,
			pageNum : pageNum,
			pageSize : pageSize
		},
		success : function(data) {
			var data = data.data.list;
			if(data.length > 0){
				$("#divShowNo").hide();
			}else{
				$("#divShowNo").show();
			}
			$("#back_list_box").empty();
			var htmlOutput = $.templates("#book_show_tmpl").render(data);
			$("#back_list_box").append(htmlOutput);
		}
	});
}	


/* var dropload = $('.back_list').dropload({
	domDown : {
        domClass   : 'dropload-down',
        domRefresh : '<div class="dropload-refresh">下面暂无数据</div>',
    },
    scrollArea : window,
    autoLoad: false,
    loadDownFn : function(me){
    	 pageNum+=1;
    	 getCart();
    	 me.resetload();
    }
});	 */
</script>


<script>
	var link = location.href;
	$.ajax({
		url : window.baseUrl + "/api/wx/createJsapiSignature",//后台给你提供的接口
		type : "Post",
		data : link,
		async : false,
		contentType : "application/json; charset=utf-8",
		dataType : "json",
		success : function(data) {
			wx.config({
				// 		        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId : data.appId, // 必填，公众号的唯一标识
				timestamp : data.timestamp, // 必填，生成签名的时间戳
				nonceStr : data.nonceStr, // 必填，生成签名的随机串
				signature : data.signature,// 必填，签名，见附录1
				// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				jsApiList : [ 'checkJsApi', 'scanQRCode' ]
			});
		}
	});

	wx.error(function(res) {
		alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
	});

	//点击按钮扫描二维码
	document.querySelector('#rich_scan').onclick = function() {
		scanQRCode();
	}

// 	$("#scanQRCode").trigger("click");

// 	wx.ready(function() {
// 		scanQRCode();
// 	});

	function scanQRCode() {
		wx.scanQRCode({
			needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
			scanType : [ "qrCode" ], // 可以指定扫二维码还是一维码，默认二者都有
			success : function(res) {
				// 获得二维码中的绘本编码
				var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
				// 				var result = "AHCN11223431"; // 当needResult 为 1 时，扫码返回的结果
				//扫描成功得到绘本code,添加到购物车中
				$.ajax({
					url : window.baseUrl + "/api/book/bookCart/create",
					type : "Post",
					data : JSON.stringify({
						"uid" : getUserId(),
						"bcode" : result,
						"cartType" : 'borrow',
						"borrowWeeks" : 1
					}),
					contentType : "application/json",
					success : function(data) {
						var code = data.code;
						if (code != 200) {
							alert(data.message);
						}
						window.location.href = "/scanRead.html";//因为我这边是扫描后有个链接，然后跳转到该页面
					}
				});
			}

		});
	}
</script>


</html>